<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="new :: common_head('供能策略')"></head>

<body>
<!--运行策略显示结果模态框1-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">策略内容</h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th>需要开启设备名称</th>
                        <th>建议开启数目</th>
                        <th>开启时间</th>
                        <th>关闭时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>免费供冷水泵</td>
                        <td class="center">2</td>
                        <td class="center">8:00</td>
                        <td class="center">17:00</td>
                    </tr>
                    <tr>
                        <td>地源热泵模块主机B</td>
                        <td class="center">2</td>
                        <td class="center">0:00</td>
                        <td class="center">6:00</td>
                    </tr>
                    <tr>
                        <td>蓄能水槽</td>
                        <td class="center">1</td>
                        <td class="center">0:00</td>
                        <td class="center">6:00</td>
                    </tr>
                    </tbody>

                </table>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">采用</button>
            </div>
        </div>
    </div>
</div>

<!-- start: Header -->
<div th:replace="~{new::header}"></div>
<!-- start: Header -->

<div class="container-fluid-full">
    <div class="row-fluid">

        <!-- start: Main Menu -->
        <div id="sidebar-left" class="span2" th:replace="new::sidebar_left"></div>
        <!-- end: Main Menu -->

        <noscript>
            <div class="alert alert-block span10">
                <h4 class="alert-heading">Warning!</h4>
                <p>You need to have <a href="" target="_blank">JavaScript</a> enabled to use this site.</p>
            </div>
        </noscript>

        <!-- start: Content -->
        <div id="content" class="span10">
            <ul class="breadcrumb">
                <li>
                    <i class="fas fa-circle-notch"></i>
                    <a th:href="@{/graphInfo/viewGraphInfo}">主页</a>
                    <i class="icon-angle-right"></i>
                </li>
                <li><a href="#">知识图谱</a></li>
            </ul>
            <div style="position: absolute;top: 80px;right: 200px;z-index: 999">
                <div class="controls">
                    <label class="radio" style="color:#fff"><input name="isPredicted" checked="true" type="radio"
                                                                   value="1">模型</label>
                    <div style="clear:both"></div>
                    <label class="radio" style="color:#fff"><input name="isPredicted" checked="false" type="radio"
                                                                   value="0">算法</label>
                </div>
            </div>
            <div style="position: absolute;top: 80px;right: 50px;z-index: 999">
                <button class="button-login" type="button" onclick="drawChart()">生成策略</button>
            </div>
            <div class="row-fluid sortable" draggable="false">
                <div class="box span12" draggable="false">
                    <div id="knowChart" style="position:relative; width: 100%;height: 800px;background-color: #578ebe;">
                        <!--<div id="loadingDiv" style="position: absolute;top:50%;left:50%">-->
                        <!--<img style="width: 30px;height: 30px;" th:src="@{img2/loadding.gif}" alt="">-->
                        <!--</div>-->
                    </div>
                </div><!--/span-->
                <!--<button class="button-login" type="button" onclick="drawChart1()">生成策略</button>-->
            </div><!--/row-->
        </div><!--/.fluid-container-->
        <!-- end: Content -->
    </div><!--/#content.span10-->
</div><!--/fluid-row-->

<div class="modal hide fade" id="myModal1">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Settings</h3>
    </div>
    <div class="modal-body">
        <p>Here settings can be configured...</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>
<div class="common-modal modal fade" id="common-Modal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <ul class="list-inline item-details">
            <li><a href="http://sc.chinaz.com">Admin templates</a></li>
            <li><a href="http://sc.chinaz.com">Bootstrap themes</a></li>
        </ul>
    </div>
</div>
<div class="clearfix"></div>
<div th:replace="new::common_js"></div>
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/js/spin.js}"></script>
<script th:src="@{/js/jquery.blockUI.js}"></script>
<script>
    $(function () {
        getNodeAndLine();
    })
    var mychart = echarts.init(document.getElementById("knowChart"));
    var opts = {
        lines: 9,
        length: 0,
        width: 15,
        radius: 20,
        corners: 1,
        rotate: 0,
        direction: 1,
        color: '#000',
        speed: 1,
        trail: 34,
        shadow: false,
        hwaccel: false,
        className: 'spinner',
        zIndex: 2e9,
        top: '50%',
        left: '50%'
    };

    function drawChart() {
        // $.blockUI();
        // addLoading();
        if (mychart != null && mychart != "" && mychart != undefined) {
            mychart.dispose();
        }
        $.ajax({
            type: "GET",
            url: "/multipower/relationship/getViewAtlas",
            dataType: "json",
            async: false,
            success: function (data) {
                console.log(data.node);
                console.log(data.edge);
                var node = data.node;
                var edge = data.edge;
                var nodeLength = data.node.length;
                var edgeLength = data.edge.length;
                console.log(nodeLength);
                console.log(edgeLength);
                var nodeObject = {   //节点对象
                    "name": "设备",
                    desc: "8",
                    "value": [200, 80],
                    symbolSize: [60, 80],
                    selected: true,
                    // symbol:'image://http://134.175.123.16:8088/b852723e-b20b-41ef-96a4-a572b248c4c4.png',
                    // symbol:'none'
                    symbol: 'circle',
                    itemStyle: {
                        color: '#fff'
                    }
                };
                line_direction_option.series[0].data = node.map(function (item, index) {
                    return {
                        name: item.deviceName,
                        desc: item.deviceId.toString(),
                        power: item.power,
                        conversionRate: item.conversionRate,
                        relationship: item.relationship,
                        cap: item.cap,
                        workTime: item.workTime,
                        value: item.coordinate,
                        symbol: (item.picPath == null) ? 'circle' : "image://" + item.picPath,
                        symbolSize: [60, 60],
                        selected: true,
                        itemStyle: {
                            color: '#fff'
                        }
                    }
                })
                line_direction_option.series[1].data = edge.map(function (item) {
                    return {
                        name: "传递",
                        coords: item.line,
                        typeName: item.typeName,
                        desc: item.desc,
                        effect: {
                            show: false,
                            trailLength: 0,
                            symbolSize: [30, 30],
                            symbol: 'none'
                            // symbol:'none'
                            // symbol:'image://img/sun.png'
                        },
                    }
                })
                $.ajax({
                    type: "GET",
                    url: "/multipower/gen",
                    dataType: "json",
                    async: true,
                    beforeSend: function () {
                        // $.blockUI();//请求之前打开
                        $.blockUI({
                            message: '<h1>请等待...</h1>'
                        });
                    },
                    error: function (data) {
                        $.unblockUI(); //返回关闭
                        var mychart = echarts.init(document.getElementById("knowChart"));
                        // mychart.resize();
                        mychart.setOption(line_direction_option);
                        mychart.on('click', function (param) {
                            //
                            var arrayIndex = param.dataIndex;
                            console.log('arrayIndex---->', arrayIndex);
                            console.log('name---->', param.name);
                            if (param.dataType == 'node') {
                                // alert("点击了节点" + param.name);
                                console.log(param);
                                console.log(param.data.desc);
                                window.location.href = "/multipower/device/get/" + param.data.desc;

                            }

                        });

                        window.parent.layerAlert('服务器错误！请稍后再试或联系管理员！', {

                            icon: 5,

                            title: "提示"

                        });
                    },
                    success: function (data) {
                        $.unblockUI(); //返回关闭
                        var path2 = 'image://img2/littlesun.png';
                        var rc = data.rc;
                        if (rc == "0") {
                            var nodeHigh = []; //保存高亮节点数组
                            var edgeHigh = []; //保存高亮边数组
                            var nodeHigh1 = data.node;
                            var edgeHigh1 = data.path;
                            var gongkuang = data.gongkuang;
                            console.log(gongkuang);
                            //遍历节点对象，将对象转为数组。
                            for (var index1 = 0; index1 < nodeHigh1.length; index1++) {
                                nodeHigh.push(nodeHigh1[index1]);
                            }
                            //遍历边对象，将对象转为数组。
                            for (var index2 = 0; index2 < edgeHigh1.length; index2++) {
                                edgeHigh.push(edgeHigh1[index2]);
                            }
                            console.log("data=" + nodeHigh);
                            console.log("data=" + edgeHigh);
                            console.log(typeof nodeHigh);
                            console.log(typeof edgeHigh);
                            console.log(data.rc);
                            console.log(typeof data.rc);

                            for (var i = 0; i < nodeLength; i++) {   //节点高亮
                                for (var j = 0; j < nodeHigh.length; j++) {
                                    if (nodeHigh[j] == node[i].deviceId) {
                                        //如果id相同则通过id查询高亮图片，高亮。
                                        $.ajax({
                                            type: "GET",
                                            url: "/multipower/device/getHighlightPic/" + node[i].deviceId,
                                            dataType: "json",
                                            async: false,
                                            success: function (data) {
                                                if (data.highlight == null) {
                                                    line_direction_option.series[0].data[i].symbol = "image://img2/circleH.png";
                                                } else {
                                                    line_direction_option.series[0].data[i].symbol = "image://" + data.highlight;
                                                }
                                            }
                                        })
                                    }
                                }
                            }
                            for (var i = 0; i < edgeLength; i++) { //边高亮
                                for (var j = 0; j < edgeHigh.length; j++) {
                                    if (edgeHigh[j] == edge[i].desc) {  //如果关系名称相同则边高亮。
                                        line_direction_option.series[1].data[i].effect.symbol = path2;
                                    }
                                }
                            }
                            // $("#loadingDiv").parent().remove();
                            var mychart = echarts.init(document.getElementById("knowChart"));
                            // mychart.resize();
                            mychart.setOption(line_direction_option);
                            mychart.on('click', function (param) {
                                // var arrayIndex = param.dataIndex;
                                // console.log('arrayIndex---->', arrayIndex);
                                console.log('name---->', param.name);
                                if (param.dataType == 'node') {
                                    // alert("点击了节点" + param.name);
                                    console.log(param);
                                    console.log(param.data.desc);
                                    window.location.href = "/multipower/device/get/" + param.data.desc;
                                    // $.ajax({
                                    //     type: "GET",
                                    //     url: "/multipower/device/"+param.data.desc,
                                    //     dataType: "json",
                                    //     async: true,
                                    //     success: function (data) {
                                    //       console.log(data);
                                    //     }
                                    // })
                                }
                            });

                        } else if (rc == "1") {
                            var mychart = echarts.init(document.getElementById("knowChart"));
                            // mychart.resize();
                            mychart.setOption(line_direction_option);
                            mychart.on('click', function (param) {
                                //
                                var arrayIndex = param.dataIndex;
                                console.log('arrayIndex---->', arrayIndex);
                                console.log('name---->', param.name);
                                if (param.dataType == 'node') {
                                    // alert("点击了节点" + param.name);
                                    console.log(param);
                                    console.log(param.data.desc);
                                    window.location.href = "/multipower/device/get/" + param.data.desc;
                                    // $.ajax({
                                    //     type: "GET",
                                    //     url: "/multipower/device/"+param.data.desc,
                                    //     dataType: "json",
                                    //     async: true,
                                    //     success: function (data) {
                                    //         console.log(data);
                                    //     }
                                    // })

                                }

                            });
                            window.parent.layerAlert('找不到策略,请检查数据输入是否正常', {
                                icon: 5,
                                title: "提示"
                            });
                            return false;
                        }
                    }
                })
                // mychart.setOption(line_direction_option);
            },
        })
    }

    function getNodeAndLine() {
        $.ajax({
            type: "GET",
            url: "/multipower/relationship/getViewAtlas",
            dataType: "json",
            async: false,
            success: function (data) {
                var node = data.node;
                var edge = data.edge;
                var nodeLength = data.node.length;
                var edgeLength = data.edge.length;
                console.log(node);
                console.log(edge);
                console.log(edgeLength);
                var nodeObject = {   //节点对象
                    "name": "设备",
                    desc: "8",
                    "value": [200, 80],
                    symbolSize: [60, 80],
                    selected: true,
                    // symbol:'image://http://134.175.123.16:8088/b852723e-b20b-41ef-96a4-a572b248c4c4.png',
                    // symbol:'none'
                    symbol: 'circle',
                    itemStyle: {
                        color: '#fff'
                    }
                };
                line_direction_option.series[0].data = node.map(function (item, index) {
                    console.log("item+" + item.deviceName);
                    return {
                        name: item.deviceName,
                        desc: item.deviceId.toString(),
                        power: item.power,
                        conversionRate: item.conversionRate,
                        relationship: item.relationship,
                        cap: item.cap,
                        workTime: item.workTime,
                        value: item.coordinate,
                        symbol: (item.picPath == null) ? 'circle' : "image://" + item.picPath,
                        symbolSize: [60, 60],
                        selected: true,
                        itemStyle: {
                            color: '#fff'
                        }
                    }
                })
                line_direction_option.series[1].data = edge.map(function (item) {
                    console.log("itemEdge" + item.line);
                    return {
                        name: "传递",
                        coords: item.line,
                        typeName: item.typeName,
                        desc: item.desc,
                        effect: {
                            show: false,
                            trailLength: 0,
                            symbolSize: [30, 30],
                            symbol: 'none'
                            // symbol:'none'
                            // symbol:'image://img/sun.png'
                        },
                    }
                })
                // $.ajax({
                //     type: "GET",
                //     url: "/multipower/gen",
                //     dataType: "json",
                //     async:false,
                //     success: function(data){
                //         var path2='image://img2/littlesun.png';
                //         var rc=data.rc;
                //         var nodeHigh=[]; //保存高亮节点数组
                //         var edgeHigh=[];//保存高亮边数组
                //         var nodeHigh1=data.node;
                //         var edgeHigh1=data.path;
                //         //遍历节点对象，将对象转为数组。
                //         for(var index1=0;index1<nodeHigh1.length;index1++){
                //             nodeHigh.push(nodeHigh1[index1]);
                //         }
                //         //遍历边对象，将对象转为数组。
                //         for(var index2=0;index2<edgeHigh1.length;index2++){
                //             edgeHigh.push(edgeHigh1[index2]);
                //         }
                //         console.log("data="+nodeHigh);
                //         console.log("data="+edgeHigh);
                //         console.log(typeof nodeHigh);
                //         console.log(typeof edgeHigh);
                //         console.log(data.rc);
                //         console.log(typeof data.rc);
                //         if(rc=="0"){
                //             for(var i=0;i<nodeLength;i++){   //节点高亮
                //                 for(var j=0;j<nodeHigh.length;j++){
                //                     console.log(node[i].deviceId);
                //                     if(nodeHigh[j]==node[i].deviceId){
                //                         //如果id相同则通过id查询高亮图片，高亮。
                //                         $.ajax({
                //                             type: "GET",
                //                             url: "/multipower/device/getHighlightPic/"+node[i].deviceId,
                //                             dataType: "json",
                //                             async:false,
                //                             success: function(data) {
                //                                 line_direction_option.series[0].data[i].symbol="image://"+data.highlight;
                //                             }
                //                         })
                //                     }
                //                 }
                //             }
                //             for(var i=0;i<edgeLength;i++){ //边高亮
                //                 for(var j=0;j<edgeHigh.length;j++){
                //                     console.log(node[i].deviceId);
                //                     if(edgeHigh[j]==edge[i].desc){  //如果关系名称相同则边高亮。
                //                         line_direction_option.series[1].data[i].effect.symbol=path2;
                //                     }
                //                 }
                //             }
                //             $("#loadingDiv").parent().remove();
                //             mychart.setOption(line_direction_option);
                //         }
                //         else{
                //             mychart.setOption(line_direction_option);
                //             window.parent.layerAlert('找不到策略,请检查数据输入是否正常', {
                //                 icon: 5,
                //                 title: "提示"
                //             });return false;
                //         }
                //
                //     }
                // })
                // mychart.resize();
                mychart.setOption(line_direction_option);
            },
        })
    }

    mychart.on('click', function (param) {
        var arrayIndex = param.dataIndex;
        console.log('arrayIndex---->', arrayIndex);
        console.log('name---->', param.name);
        if (param.dataType == 'node') {
            // alert("点击了节点" + param.name);
            console.log(param);
            console.log(param.data.desc);
            window.location.href = "/multipower/device/get/" + param.data.desc;
            // console.log("点击节点了");
            // $.ajax({
            //     type: "GET",
            //     url: "/multipower/device/"+param.data.desc,
            //     dataType: "json",
            //     async: true,
            //     success: function (data) {
            //         console.log(1);
            //         console.log(data);
            //     }
            // })
        }
    });

    var line_direction_option = {
        title: {  //标题
            // text: '夏季能源知识图谱',
            left: '-5',
            top: '10px',
            textStyle: {
                color: '#ffffff',
                fontFamily: '微软雅黑',
                fontWeight: 'lighter',
                fontSize: 18
            },
        },
        tooltip: {
            trigger: 'item',
            // formatter:"名称:{b0}" +"<br>"+
            // "坐标值:"+"["+"{c0}"+"]",
            formatter() {
                for (x in arguments) {
                    if (arguments[x].componentSubType == "graph") {
                        var relation = arguments[x].data.relationship;
                        var relationStr = "";
                        var relationLength = relation.length;
                        for (var i = 0; i < relationLength; i++) {
                            relationStr += "关联设备" + i + ":" + relation[i].deviceName + "  " + "损耗率:" + relation[i].lossRate + "  " + "能源属性:" + relation[i].typeName + "<br/>"
                        }
                        return '设备名:' + arguments[x].data.name + "<br/>" + "平均每小时产能:" + arguments[x].data.power + "kW" + "<br/>" + "能效比:" + arguments[x].data.conversionRate + "<br/>" + relationStr + "上限:" + arguments[x].data.cap + "kWh" + "<br/>" + "设备开启时间:" + arguments[x].data.workTime + "点" + "<br/>" + "坐标:" + "[" + arguments[x].data.value + "]" + "<br/>";
                    }
                    if (arguments[x].componentSubType == "lines") {
                        console.log(arguments[x].data.typeName);
                        return arguments[x].data.typeName;
                    }
                }
            }
        },
        xAxis: {  //X轴的设置
            type: 'value',
            boundaryGap: false,
            show: false
        },
        yAxis: { //Y轴的设置
            type: 'value',
            show: false,
            inverse: true,

        },
        series: [
            {   //节点
                // 提示框的配置
                type: 'graph',
                layout: 'none',
                // silent: true,          //不响应鼠标事件
                coordinateSystem: 'cartesian2d',
                symbolSize: 20,
                showEffectOn: 'render',
                zlevel: 2,
                rippleEffect: {
                    period: 3, //波纹秒数
                    brushType: 'fill', //stroke(涟漪)和fill(扩散)，两种效果
                    scale: 10 //波纹范围
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        show: true,
                        position: 'bottom',//设置label显示的位置
                        // formatter: '{c}',//设置label读取的值为value
                        textStyle: {
                            fontSize: '18'
                        },
                    }
                },
                data: []
            },
            {
                type: 'lines',
                symbol: ['none', 'arrow'],
                symbolSize: 10,
                coordinateSystem: 'cartesian2d',
                label: {
                    show: true,
                    position: 'middle',
                    fontSize: 18,
                    color: '#fff',
                },
                lineStyle: {
                    normal: {
                        // color: '#fff',
                        color: '#fff',
                        width: 3,
                        opacity: 0.5,
                        curveness: 0,
                    }
                },
                effect: {
                    show: true,
                    // smooth: false,
                    trailLength: 0,
                    symbol: "none", // ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’
                    // color: '#507577',
                    symbolSize: 50,
                    // symbol:planePath,
                    // symbol:'none'
                },
                data: [],
            }
        ],
    }
    window.addEventListener("resize", function () {
        mychart.resize();
    });
</script>
</body>
</html>